<template>
  <div class="mybackgroud">
    <div class="centerLoading">
      <div style="text-align:center" class="textd">
        StudentLog
      </div>

      <div class="item__content">
        <label
          ><input
            class="inputId"
            type="text"
            placeholder="userName"
            v-model="username"
            required
        /></label>
      </div>

      <div class="item__content">
        <label>
          <input
            class="inputId"
            type="text"
            placeholder="passWord"
            v-if="showPwd"
            v-model="pwd"
            required
          />

          <input
            class="inputId"
            type="password"
            placeholder="passWord"
            v-else
            v-model="pwd"
            required
          />
        </label>

        <span class="switch_text" @click="showPwdway">show</span>
      </div>

      <div style="padding-top: 50px;">
        <!-- <router-link to="/grades" tag="button" replace active-class="active"  class="buttonLogin" @click="login_s">Login</router-link> -->
        <!-- <router-link to="/grades" tag="button" replace active-class="active"  class="buttonLogin" @click="login_s">Login</router-link> -->
        <button class="buttonLogin" @click="login_s">Login</button>
      </div>
    </div>
  </div>
</template>

<script>
import { s_request } from "../network/request";

export default {
  name: "Login",
  data() {
    return {
      username: "",
      pwd: "",
      showPwd: false
    };
  },
  methods: {
    // 四条弹窗
    open1(mes) {
      this.$message(mes);
    },
    open2(mes) {
      this.$message({
        message: mes,
        type: "success"
      });
    },

    open3(mes) {
      this.$message({
        message: mes,
        type: "warning"
      });
    },

    open4(mes) {
      this.$message.error(mes);
    },
    // 显示or隐藏密码
    showPwdway() {
      this.showPwd = !this.showPwd;
    },

    login_s() {
      s_request({
        url: "/student/login",
        method: "post",
        data: {
          studentId: this.username,
          studentPassword: this.pwd
        }
      })
        .then(res => {
          console.log(res);
          // 验证正确实现页面跳转
          if (res.code == 200) {
            // 缓存账号信息
            localStorage.setItem("userid", JSON.stringify(this.username));
            localStorage.setItem(
              "studentBirth",
              JSON.stringify(res.data.studentBirth)
            );
            localStorage.setItem(
              "studentClassId",
              JSON.stringify(res.data.studentClassId)
            );
            localStorage.setItem(
              "studentGender",
              JSON.stringify(res.data.studentGender)
            );
            localStorage.setItem(
              "studentName",
              JSON.stringify(res.data.studentName)
            );
            localStorage.setItem(
              "studentMajorName",
              JSON.stringify(res.data.studentMajorName)
            );
            localStorage.setItem(
              "studentDepartmentName",
              JSON.stringify(res.data.studentDepartmentName)
            );
            localStorage.setItem(
              "studentClassName",
              JSON.stringify(res.data.studentClassName)
            );
            this.$router.push({ path: "/student" });
          }

          // 账号密码错误
          if (res.code == 20012) {
            // alert("User does not exist");
            this.open1("User does not exist");
          }

          // 密码错误
          if (res.code == 20011) {
            this.open4("Password error");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
.mybackgroud {
  background-color: #2d3a4b;
  color: aliceblue;
  font-size: larger;
  font-family: "PMZD";
  width: 100vw;
  height: 100vh;
}

/* 使div块在页面居中 */
.centerLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 430px;
}

/* 学生登录大字 */
.textd {
  font-size: 70px;
  font-weight: lighter;
  padding-bottom: 40px;
}

/* input框 */
.item__content {
  /* 去掉边框 */
  border: none;
  border-bottom: #fff 2px solid;
  line-height: 40px;
  position: relative;
  font-size: 20px;
  border-radius: 5px;
  top: 10px;
  margin-bottom: 60px;
}

/* 输入框内字体颜色 */
input::placeholder {
  color: #fff;
}

.inputId {
  background: transparent;
  border: 0px;
  -webkit-appearance: none;
  border-radius: 0px;
  padding: 8px 1px 8px 11px;
  color: #fff;
  height: 47px;
  width: 80%;
  outline: none;
  caret-color: #fff;
}

/* 登录按钮 */
.buttonLogin {
  color: #fff;
  background-color: #2d3a4b;
  border-color: #fff;
  display: inline-block;
  border-radius: 5px;
  font-size: 25px;
  height: 51px;
  width: 60%;
  /* 按钮居中 */
  display: block;
  margin: 0 auto;
}

/* 小眼睛 */
.switch_text {
  width: 10px;
  height: 10px;
  color: #fff;
}
</style>
